<template>
  <div class="man">
    <form class="submit" id="sub" >
      <div class="wrap_all" style="padding:0">
        <div class="content_head item_form">
          <div class="subject item_box outlines">
            <label>项目</label>
            <input type="text" v-model="formValue.projectName" @blur="foucs($event)" placeholder="请输入项目名称"  name="projectName"/>

          </div>
          <div class="contents item_box">
            <label>内容</label>
                 <textarea  @blur="foucs($event)"  v-model="formValue.projectContent" cols=50 rows=8 name="projectContent" value="请描述你的投资意向">

                 </textarea>
          </div>
        </div>

        <div class="content_location item_form">
          <div class="item_box selectCity">
            <label>愿意投资地</label>
            <select name="investCity" @blur="foucs($event)"  v-model="formValue.selected">
              <option value="0" selected="selected">武汉</option>
              <option value="1">长沙</option>
              <option value="2">合肥</option>
              <option value="3">南昌</option>
            </select>
          </div>
        </div>
        <div class="content_personal item_form">
          <ul>
            <li>
              <label>姓名</label>
              <input type="text"  @blur="foucs($event)" v-model="formValue.userName"  name="userName"/>
            </li>
            <li class="item_li">
              <label>手机号</label>
              <input @blur="foucs($event)"  v-model="formValue.userTel" type="number" name="userTel" />
              <span class="send" @click="send">发送验证码</span>
            </li>
            <li>
              <label>验证码</label>
              <input @blur="foucs($event)" type="text" v-model="formValue.identifying"  name="identifying"/>
            </li>
          </ul>
        </div>
      </div>
    </form>
    <Toast v-show="stateTaost.show"></Toast>
    <Poplayer  v-if="layer"  @closePop="closeLayer"></Poplayer>
    </div>
</template>
<style>
  .submit {
    background: #eee;
    /*padding-left:0.3rem;*/
  }

  .submit .item_form {
    margin-bottom: 0.1rem;
    background: #fff;
    padding-left: 0.3rem
  }

  .man {
    border-top: 1px solid #eee;
    /*background:#eee;*/
  }

  .item_form .item_box {
    /*border-bottom:1px solid #eee;*/
    position: relative;
    padding: 0.2rem 0;
    padding-right: 0.3rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }

  .item_box input, .item_box select {
    font-size: 0.26rem;
    padding: 0.1rem;
    width: 74%;
    border: none;
  }

  .item_box select {
    background: #fff;
    outline: none;

  }

  .selectCity {
    position: relative;
  }

  .selectCity:after {
    content: "";
    display: block;
    width: 0.12rem;
    height: 0.12rem;
    background: #fff;
    border-right: 2px solid #999;
    border-bottom: 2px solid #999;
    position: absolute;
    right: 0.36rem;
    top: 50%;
    transform: rotate(45deg);
    margin-top: -0.10rem;

  }

  .outlines {
    border-bottom: 1px solid #eee;
  }

  label {
    font-size: 0.26rem;
    line-height: 0.65rem;
  }

  .item_box input {
    width: 71%;
    outline: none;
  }

  .item_box textarea {
    height: 2rem;
    width: 74%;
    border: none;
    outline: none;
  }

  .item_form ul li input {
    font-size: 0.3rem;
    padding: 0.1rem;
    width: 70%;
    outline: none;
  }

  .item_form ul li {
    border-bottom: 1px solid #eee;
    padding: 0.2rem 0;
    padding-right: 0.3rem;
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
  }

  .item_li input {
    width: 32% !important;
    align-self: center;
  }

  input {
    border: none;
  }

  .item_li span {
    padding: 0 0.2rem;
    border: 1px solid #ccc;
    box-sizing: border-box;
    line-height: 0.6rem;
    border-radius: 0.1rem;
    color: #999;
    height:0.6rem;
    font-size:0.26rem;

  }
  /*.wrap_all{padding:0 !important;}*/
</style>
<script>
  import {mapGetters} from 'vuex'
  import Poplayer from '../components/poplayer'
      const Toast={
        template:`<div :style="styles" ><p>{{taost.msg}}</p></div>`,
        data(){
          return{
            msg:'不能为空',
            styles:{
              background:'rgba(0,0,0,0.8)',
              padding:'0.1rem 0.4rem',
              position: 'fixed',
              left:'50%',
              top:'50%',
              transform:'translate(-50%,-50%)',
              color:'#fff',
              borderRadius:'0.05rem',
              fontSize:'0.2rem'
            },

          }
        },
        computed:{
          ...mapGetters({taost:'getTaostVals'})
        },
        methods:{
        disappear(){
       if(this.taost.show){
        setTimeout(() => {
          this.$store.dispatch('showTaost', {alertMsg:'',onShow:false});
          },1500)
           }
        },


        },
       watch:{
         taost:'disappear'
       },
      mounted(){
        //console.log('a')
       //this.disappear()
     }

      }

    export default{
        props:['cityadd'],
        data(){
            return {
              formValue:{
                projectName: '',
                projectContent: '',
                selected: '',
                userName: '',
                userTel: '',
                identifying: ''
                },
              layer:false
             }
        },
      computed:{
       ...mapGetters({stateTaost:'getTaostVals'})
      },
      methods:{
        submit(){
          if(this.checkForm()){
            //alert('表单提交成功')
            this.layer=true
          }
        },
        checkForm(){
          var start = false
          for (var item in this.formValue ) {
               let it = this.formValue[item];
              if(it !== ''){

                if(item=='selected'&& it ==''){
                  this.taost(item,it)
                  return false

                }
                if(item=='identifying' && it ==''){
                  this.taost(item,it)
                  return false
                }
                start = true
              }else{
                this.taost(item,it)
                start = false
                return false
              }

          }
          return start;
        },

        foucs(event){
          //console.log(event.target.name+'---'+event.target.value)
          var typeName = event.target.name;
          var values = event.target.value;
          this.taost(typeName,values)

        },

        taost(typeName,values){
          switch(typeName){
            case 'projectName':
              (values == '' || values.length < 3 ) && this.$store.dispatch('showTaost',{alertMsg:'项目名称不能为空',onShow:true})
              break;
            case 'projectContent':
              console.log(values);
              (values == '' || values.length < 10 ) && this.$store.dispatch('showTaost',{alertMsg:'描述不能为空或小于10个字符',onShow:true});
              break;
            case 'selected':
              (values == '' || values.length < 2 ) && this.$store.dispatch('showTaost',{alertMsg:'请选择城市',onShow:true});
              break;
            case 'userName':
              (values == '' || values.length < 2 ) && this.$store.dispatch('showTaost',{alertMsg:'姓名不能为空或小于两个字符',onShow:true});
              break;
            case 'userTel':
              ( !/^1(3|4|5|7|8)\d{9}$/.test(this.formValue.userTel)) && this.$store.dispatch('showTaost',{alertMsg:'手机号不正确',onShow:true});
              break;
            case 'identifying':
              ( values.length == '' || values.length < 4 ) && this.$store.dispatch('showTaost',{alertMsg:'验证码不能为空',onShow:true});
              break;
          }
        },
        send(){
          if(/^1(3|4|5|7|8)\d{9}$/.test(this.formValue.userTel)){
            //请求接口
            //alert('发送成功')
          }else{
            this.$store.dispatch('showTaost',{alertMsg:'手机号不正确',onShow:true})
          }
        },
        closeLayer(b){
          if(!b){
            this.layer = false;
          }
        }
      },
      watch:{
        cityadd:'submit'
      },
      mounted(){
        //console.log(this.$parent.$data.activation)
      },
      components:{
          Toast,
          Poplayer
      }



    }

</script>
